<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org">
<head th:include="_header_include::frag(~{::title},~{},~{::style})">
<title>模块管理</title>
<style>
.moduleManage .leftBox { /*width: 200px;*/
	height: auto;
	border: 1px solid #ebeef5;
	min-height: 480px;
}

.moduleManage .leftTitle {
	background: #c0defc;
	text-indent: 20px;
	height: 40px;
	line-height: 40px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px; 
}

.moduleManage .leftTree {
	padding: 10px;
}

.moduleManage .rightTitle {
	background: #ebeef5;
	text-indent: 20px;
	height: 40px;
	line-height: 40px;
}

button a {
	color: #fff !important;
	display: block;
}
/*20190419*/
.moduleManage .leftTitle { color: #ffffff; background-color: #5c6be8; border-color: #5c6be8; }
</style>
</head>
<body>
	<div id="moduleManage" class="moduleManage mainPadding" style="display: none;">
		<el-breadcrumb separator="/" class="elBreadcrumb marginB20">
		<el-breadcrumb-item>Home</el-breadcrumb-item> <el-breadcrumb-item>系统管理</el-breadcrumb-item>
		<el-breadcrumb-item>菜单管理</el-breadcrumb-item>
		</el-breadcrumb>
		<el-row :gutter="20"> 
      <el-col :span="5">
    		<div class="leftBox">
    			<div class="leftTitle fs16">菜单列表</div>
    			<el-tree :data="dataTree" node-key="id"
    				:default-expanded-keys="expandedKeys" ref="tree" highlight-current
    				  @node-click="clickModuleNode"
    				class="leftTree"> </el-tree>
    		</div>
		  </el-col> 
      <el-col :span="19"> 
        <el-row class="marginB20"> 
          <el-col :span="17"> 
            <el-button type="primary" @click="clickAddModule"> 
              <i class="el-icon-plus"></i>添加下级菜单
            </el-button> 
            <el-button type="success" @click="modifyChildModule">
              <i class="el-icon-edit"></i>编辑</el-button>
            <el-button type="danger" @click="deleteFun">
              <i class="el-icon-delete"></i>删除
            </el-button> 
          </el-col> 
          <el-col :span="7"> 
            <el-input placeholder="请输入菜单名称进行查询" v-model="searchForm.inputModuleName" class="input-with-select"> 
              <el-button slot="append" icon="el-icon-search" @click="getQuery">搜索</el-button>
            </el-input> 
          </el-col> 
        </el-row> 
        <div class="mainSearchBg"> 
        <el-row> 
          <el-table ref="multipleTable" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange" empty-text="此菜单无下级菜单" border :data="dataTable"> 
            <el-table-column align="center" type="selection" prop="id" width="55" @selection-change="handleSelectionChange"></el-table-column> 
            <el-table-column align="center" prop="name" label="菜单名称"></el-table-column> 
            <el-table-column align="center" prop="sortNo" label="优先级" width="90px"></el-table-column> 
            <el-table-column align="center" prop="authCode" label="授权名称" width="300px"></el-table-column> 
            <el-table-column align="center" prop="iconName" label="图标名称" width="120px"></el-table-column> 
            <el-table-column align="center" prop="iconUrl" label="图标地址" width="450px"></el-table-column> 
            <el-table-column align="center" prop="url" label="菜单地址" width="400px"></el-table-column> </el-table> 
            <table-pagination v-if="paginationShow" :pager="pager" @change="initTableData"></table-pagination> 
          </el-row> 
        </div>
        </el-col> 
      </el-row>
	</div>
</body>
<!-- import common js-->
<div th:include="_footer_include :: #jsLib"></div>
<script th:inline="javascript">
var moduleData=[[${moduleData}]];
var selectModule=[[${selectModule}]];
var expandedKeys =[];//默认展开节点
if(null!=moduleData){
		for(var i=0;i<moduleData.length;i++){
			var curNode = moduleData[i];
			expandedKeys.push(curNode.id);
			var childs = curNode.children;
			if(childs){
				for(var j=0;j<childs.length;j++){
					var curChildNode = childs[j];
					 expandedKeys.push(curChildNode.id);
				}
			}
		 }	
}
  var moduleVM=new Vue({
        el: '#moduleManage',
        data: function() {
            return {
                paginationShow: false,
                dataTree:moduleData,
                expandedKeys:expandedKeys,
                dataTable: [],
                multipleSelection: [],
                dialogFormVisible: false,
                form: {
                    name: '',
                    remark: '',
                    delivery: false,
                    type: []
                },
                pager:{//组织列表pager
                    total: 0,
                    currentPage: 1,
                    pageSize: 20,
                },
                selectedNode:selectModule,
                formLabelWidth: '120px',
                searchForm: {
                  inputModuleName:''
                },
                storeForm: {
                  inputModuleName:''
                },
                storeId: '',
                scrollTop: 0,
            }             
        },
        methods: {
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            //选中菜单数据节点
            clickModuleNode(data,node,obj){
              this.searchForm.inputModuleName='';
              this.selectedNode = data;
              this.getQuery();
            },
            //选中菜单数据节点
            clickAddModule(){
              var moduleData=moduleVM.selectedNode;
              window.location.href="/module/moduleManager/addModulePre?moduleId="+moduleData.id+"&level="+moduleData.level; 
            },
            
            getQuery(){
                this.initTableData();
            },
            initTableData(){
            	// 查询 table 需要数据
                var pageSize = this.pager.pageSize;
                var pageNum = this.pager.currentPage;
            	if(0==pageNum){
            		pageNum=1;	
            	}
                var param = {};
                var parentId = this.selectedNode.id;
                param.parentId = parentId;
                param.name = this.searchForm.inputModuleName;
                param.pageNum=pageNum;
                param.pageSize=pageSize;
                axios.post('/module/moduleManager/queryModuleDataByPage?pageNum='+pageNum+"&pageSize="+pageSize,param)
                    .then(function (response) {
                        var data =  response.data
                        if(data.code=='0'){
                        	var resData = data.data;
                        	moduleVM.dataTable= resData.data;
                            //3.分页组件
                            moduleVM.pager.total= resData.total;
                            moduleVM.pager.currentPage = resData.currentPage;
                            moduleVM.pager.pageSize = resData.pageSize;

                            // 取出存储的id
                            if(!moduleVM.paginationShow){
                               if(moduleVM.storeId){
                                   moduleVM.$nextTick(function(){
                                      var storage = [];
                                      moduleVM.dataTable.forEach(function(item, index){
                                          if(item.id === moduleVM.storeId ){
                                              storage.push(moduleVM.dataTable[index]);
                                          }
                                      })
                                      moduleVM.toggleSelection(storage);
                                      moduleVM.$el.querySelector('.el-table__body-wrapper').scrollTop = moduleVM.scrollTop;
                                  })
                              }
                            }else{
                              removeSessionStore ("moduleManagerStoreForm");
                              removeSessionStore ("moduleManagerOtherVal");
                            }
                            moduleVM.paginationShow = true;
                            moduleVM.storeForm = moduleVM.searchForm;

                        }else{
                        	console.error(data);
                        }
                        
                       
                    })
                    .catch(function (error) {
                      console.log(error);
                    })
                    .then(function () {
                      // always executed
                    });  
            },            
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                  this.$refs.multipleTable.clearSelection();
                }
            },
             modifyChildModule(){
              //修改菜单数据	
            	var rows = this.multipleSelection;
                if(rows.length!=1){
                    this.$message({
                       message: '请选择一条数据进行修改',
                       type: 'warning'
                     });
                    return;
                }
                // 存储选中信息--start
                var clueId=rows[0].id;  
                setSessionStore("moduleManagerStoreForm", this.storeForm);
                var otherVal = {
                    "currentPage": this.pager.currentPage,
                    "clueId": clueId,
                    "scrollTop": this.$el.querySelector('.el-table__body-wrapper').scrollTop
                }
                setSessionStore("moduleManagerOtherVal", otherVal);
                // 存储选中信息--end 
                // window.location.href="/module/moduleManager/queryModuleById?moduleId="+rows[0].id; 
                window.location.href="/module/moduleManager/queryModuleById?moduleId="+clueId; 
             },
            deleteFun() {
               var deleInfo=moduleVM.multipleSelection;
 	           if(deleInfo.length <1){
                   this.$message({
                      message: '请选择删除数据',
                      type: 'warning'
                    });
                   return;
               }
 	          var moduleName="";
 	           if(null!=deleInfo){
 	 		       for ( var i = 0; i <deleInfo.length; i++){
 	 		    	  moduleName+="【"+deleInfo[i].name+"】";
 	 		        }
 	           }
                this.$confirm("确定要删除"+moduleName+"菜单吗?", '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                   	// 查询 table 需要数据
                    var param = {};
                    var deleInfo=moduleVM.multipleSelection;
  	        	    var ids=[];
  		            if(null!=deleInfo){
  		             for ( var i = 0; i <deleInfo.length; i++){
  		            	ids.push(deleInfo[i].id);
  		             }
  		             var param={};
  		             param.deleteById=ids;
                    axios.post('/module/moduleManager/deleteModuleInfo',param)
                        .then(function (response) {
                            var data =  response.data
                            if(data.code=='0'){
                            	  moduleVM.$message({message:'操作成功',type:'success',duration:2000,onClose:function(){
                                 var selectedNode= moduleVM.selectedNode;
                                 window.location.href="/module/moduleManager/initModuleInfo?moduleId="+selectedNode.id;
                        	  }});
                            }else{
                            	console.error(data);
                            }
                        })
                        .catch(function (error) {
                          console.log(error);
                        })
                        .then(function () {
                          // always executed
                        });  
                  }
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                });
            },
        },
        created(){
          // 进入页面判断有是否有存储值
          if(!this.paginationShow){
              var storeVal = getSessionStore("moduleManagerStoreForm");
              var otherVal = getSessionStore("moduleManagerOtherVal");
              if(storeVal && otherVal){
                  this.searchForm = storeVal;
                  this.$set(this.pager,"currentPage",otherVal.currentPage);
                  this.storeId = otherVal.clueId;
                  this.scrollTop = otherVal.scrollTop;
              }
          };
          var localVal=localStorage.getItem('allChangePageSize')?parseInt(localStorage.getItem('allChangePageSize')):'';
          if(localVal){this.pager.pageSize = localVal;}
        	if(null!=selectModule&&selectModule){
          	// 查询 table 需要数据
              var pageSize = this.pager.pageSize;
              var pageNum = this.pager.currentPage;
          	if(0==pageNum){
          		pageNum=1;	
          	}
              var param = {};
              var parentId = selectModule.id;
              param.parentId = parentId;
              param.name = this.searchForm.inputModuleName;
              param.pageNum=pageNum;
              param.pageSize=pageSize;
              axios.post('/module/moduleManager/queryModuleDataByPage?pageNum='+pageNum+"&pageSize="+pageSize,param)
                  .then(function (response) {
                      var data =  response.data
                      if(data.code=='0'){
                      	var resData = data.data;
                      	moduleVM.dataTable= resData.data;
                          //3.分页组件
                          moduleVM.pager.total= resData.total;
                          moduleVM.pager.currentPage = resData.currentPage;
                          moduleVM.pager.pageSize = resData.pageSize;
                      }else{
                      	console.error(data);
                      }
                      
                     
                  })
                  .catch(function (error) {
                    console.log(error);
                  })
                  .then(function () {
                    // always executed
                  });  
          }
      	},
      	mounted(){ 
      	  document.getElementById('moduleManage').style.display = 'block';
      	  this.clickModuleNode(this.dataTree[0],null,null);
      	}
    })
</script>
</html>